<template>
	<view class="content" v-if="pageShow">
		<view class="padding">
			<view class="padding ffffff radius">
				<view class="">
					<view class="nofocusbgc">标题</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder" placeholder="请输入标题"
							style="height: 140rpx;font-size: 30rpx;" v-model="title"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="">
					<view class="nofocusbgc">描述</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder" placeholder="请输入描述"
							style="height: 140rpx;font-size: 30rpx;" v-model="description"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="flexbetween">
					<view class="nofocusbgc white_nowrap">选择分类</view>
					<view class="flexleft" @click="show=true">
						<input class="text_g textright margin_right1" type="text" placeholder="请选择分类"
							placeholder-style="color: #999999;font-size: 30rpx;" disabled v-model="community_category_name">
							<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" style="margin-bottom: 100rpx;">
				<view class="nofocusbgc">上传图片（{{martial_images_arr.length}}/3）</view>
				<view class="flexleft flex_wrap">
					<view class="item_image_box margin_top" v-for="(item,index) in martial_images_arr" :key="index">
						<view class="item_image radius">
							<image :src="item" mode="widthFix"></image>
							<view class="deletimg" @click="deleimage(index,martial_images_arr)"></view>
						</view>
					</view>
					<!-- 图片盒子 -->
					<view class="item_image_box margin_top" @click="uploadImg(martial_images_arr,3)"
						v-if="martial_images_arr.length<3">
						<view class="item_image radius">
							<image src="/static/image/home/noimage.png" mode="widthFix"></image>
							<!-- <view class="deletimg"></view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdb">
				<view class="bigbtn" @click="sendShow">发布</view>
			</view>
		</view>
		<u-picker :show="show" title="选择分类" :columns="cateList" keyName="name" confirmColor="#FF0000" @confirm="confirm" @cancel="show=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				title: "", //展示标题
				description: "", //展示描述
				martial_images: [], //展示图片
				martial_images_arr: [], //图片
				show_id: "", //展示id
				show_info: {}, //展示详情
				cateList:[],//展示分类
				community_category_id:"",//分类id
				community_category_name:"",//分类名称
				show:false,
				pageShow:false
			}
		},
		onLoad(options) {
			if (options.id) {
				uni.setNavigationBarTitle({
					title:"编辑"
				})
				this.show_id = options.id
			}else{
				this.pageShow=true
			}
			this.getCateList()
		},
		methods: {
			getShowInfo() { //展示详情
				let _this = this
				httpRequest.request('/api/community/getform', 'GET', {
					id: _this.show_id
				}).then(res => {
					if (res.code == 1) {
						_this.title = res.data.info.title
						_this.description = res.data.info.description
						_this.martial_images_arr = res.data.info.images_arr ? res.data.info.images_arr : []
						_this.martial_images = res.data.info.images ? res.data.info.images.split(",") : []
						if(res.data.info.community_category_id){
							this.community_category_id=res.data.info.community_category_id
							let index=this.cateList[0].findIndex(item=>{
								return this.community_category_id==item.id
							})
							this.community_category_name=this.cateList[0][index].name
						}
						this.pageShow=true
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getCateList(){ //展示分类
				let _this = this
				httpRequest.request('/api/community/getcategory', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.cateList.push(res.data.category2)
						if(this.show_id){
							this.getShowInfo()
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			confirm(e) {
				console.log(e)
				this.community_category_id=e.value[0].id
				this.community_category_name=e.value[0].name
				this.show=false
			},
			sendShow() { //发布展示
				let _this = this
				if (!_this.title) {
					httpRequest.toast("请输入标题！");
					return false
				}
				if (!_this.description) {
					httpRequest.toast("请输入描述！");
					return false
				}
				if (!_this.community_category_id) {
					httpRequest.toast("请选择分类！");
					return false
				}
				httpRequest.request('/api/community/publish', 'POST', {
					id: _this.show_id,
					type: 2,
					title: _this.title,
					description: _this.description,
					images: _this.martial_images.join(),
					community_category_id:_this.community_category_id
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			uploadImg(value, length) {
				let that = this;
				let martial_images = that.martial_images
				let martial_images_arr = that.martial_images_arr
				if (martial_images.length >= length) {
					httpRequest.toast('最多上传' + length + '张图片');
					return;
				}
				this.upFile.chooseImage({
					count: length - martial_images.length
				}, function(res) {
					// console.log(res);
					martial_images_arr.push(res.fullurl)
					martial_images.push(res.url)
					// console.log(martial_images_arr, martial_images);
					that.martial_images_arr = martial_images_arr
					that.martial_images = martial_images
				})
			},
			deleimage(i, upimg) { //删除图片
				upimg.splice(i, 1)
				this.martial_images.splice(i, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.placeHolder {
		color: #999999;
		font-size: 30rpx;
	}

	.nofocusbgc {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>